import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Phone, MessageSquare, ArrowRight, X } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useInView } from '@/utils/animation';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useToast } from '@/hooks/use-toast';
import HealthIllustration from '@/components/HealthIllustration';
import { useIsMobile } from '@/hooks/use-mobile';

const LoginPage = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [verificationCode, setVerificationCode] = useState('');
  const [showVerificationInput, setShowVerificationInput] = useState(false);
  const { toast } = useToast();
  const navigate = useNavigate();
  const isMobile = useIsMobile();
  
  const { ref, isInView } = useInView(0.1);
  
  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value.replace(/\D/g, '');
    setPhoneNumber(value);
  };
  
  const handleSendVerification = () => {
    if (phoneNumber.length !== 11) {
      toast({
        title: "提示",
        description: "请输入正确的手机号码",
        variant: "destructive",
      });
      return;
    }
    
    toast({
      title: "验证码已发送",
      description: `验证码已发送至 ${phoneNumber}`,
    });
    
    setShowVerificationInput(true);
  };
  
  const handleLogin = () => {
    if (verificationCode.length !== 6) {
      toast({
        title: "提示",
        description: "请输入6位验证码",
        variant: "destructive",
      });
      return;
    }
    
    toast({
      title: "登录成功",
      description: "欢迎回来！",
    });
    
    setTimeout(() => {
      navigate('/');
    }, 1000);
  };
  
  const handleWeChatLogin = () => {
    toast({
      title: "微信登录",
      description: "正在跳转至微信授权...",
    });
    
    setTimeout(() => {
      toast({
        title: "登录成功",
        description: "欢迎回来！",
      });
      navigate('/');
    }, 1500);
  };

  return (
    <div className="min-h-screen flex flex-col md:flex-row">
      <div className="fixed inset-0 bg-gradient-to-br from-primary/10 via-background to-dopamine-purple/20 z-[-1]">
        <div className="absolute top-[10%] left-[15%] w-32 h-32 rounded-full bg-dopamine-yellow/5 blur-3xl"></div>
        <div className="absolute bottom-[20%] right-[10%] w-40 h-40 rounded-full bg-dopamine-coral/5 blur-3xl"></div>
        <div className="absolute top-[40%] right-[25%] w-24 h-24 rounded-full bg-dopamine-blue/5 blur-3xl"></div>
      </div>
      
      <div className="p-6 md:hidden">
        <Link to="/" className="flex items-center gap-1">
          <X className="h-5 w-5" />
          <span className="text-sm">返回</span>
        </Link>
      </div>
      
      <div className="hidden md:flex md:w-1/2 flex-col items-center justify-center p-10">
        <div className="text-center mb-6">
          <Link to="/" className="flex items-center justify-center gap-2 mb-6">
            <X className="h-5 w-5" />
            <span className="text-sm">返回首页</span>
          </Link>
          <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-dopamine-purple bg-clip-text text-transparent mb-2">
            鹰朗健康
          </h1>
          <p className="text-muted-foreground">智能健康管理，为您的健康保驾护航</p>
        </div>
        
        <HealthIllustration className="mt-8" />
        
        <div className="glass-card px-6 py-4 mt-8 rounded-xl max-w-xs text-center backdrop-blur-sm bg-white/10 border border-white/20 shadow-md">
          <p className="text-sm text-muted-foreground">
            登录即可获得个性化的健康建议和全面的健康管理服务
          </p>
        </div>
      </div>
      
      <div className="flex-1 flex flex-col items-center justify-center p-6" ref={ref}>
        <div 
          className={cn(
            "w-full max-w-md transition-all duration-700 transform",
            isInView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-12"
          )}
        >
          <div className="text-center mb-8 md:hidden">
            <h1 className="text-3xl font-bold bg-gradient-to-r from-primary to-dopamine-purple bg-clip-text text-transparent">
              鹰朗健康
            </h1>
            <p className="text-muted-foreground mt-1">管理健康，智慧生活</p>
            
            <div className="my-6">
              <HealthIllustration variant="compact" />
            </div>
          </div>
          
          <div className="glass-card px-8 py-10 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 shadow-xl">
            {!showVerificationInput ? (
              <>
                <h2 className="text-xl font-semibold mb-6">登录账号</h2>
                
                <div className="mb-6">
                  <div className="relative">
                    <Input
                      type="tel"
                      placeholder="请输入手机号"
                      value={phoneNumber}
                      onChange={handlePhoneChange}
                      maxLength={11}
                      className="pl-12 h-14 text-lg rounded-xl focus-visible:ring-primary"
                    />
                    <Phone className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
                  </div>
                </div>
                
                <Button 
                  onClick={handleSendVerification}
                  className="w-full h-14 text-lg rounded-xl bg-primary hover:bg-primary/90"
                  disabled={phoneNumber.length !== 11}
                >
                  获取验证码
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
              </>
            ) : (
              <>
                <div className="flex justify-between items-center mb-6">
                  <h2 className="text-xl font-semibold">输入验证码</h2>
                  <Button 
                    variant="ghost" 
                    size="sm" 
                    onClick={() => setShowVerificationInput(false)}
                    className="text-muted-foreground hover:text-foreground"
                  >
                    更换号码
                  </Button>
                </div>
                
                <p className="text-sm text-muted-foreground mb-6">
                  验证码已发送至 {phoneNumber}
                </p>
                
                <div className="mb-6">
                  <div className="relative">
                    <Input
                      type="text"
                      placeholder="请输入6位验证码"
                      value={verificationCode}
                      onChange={(e) => setVerificationCode(e.target.value.replace(/\D/g, ''))}
                      maxLength={6}
                      className="pl-12 h-14 text-lg rounded-xl focus-visible:ring-primary"
                    />
                    <MessageSquare className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
                  </div>
                </div>
                
                <Button 
                  onClick={handleLogin}
                  className="w-full h-14 text-lg rounded-xl bg-primary hover:bg-primary/90"
                  disabled={verificationCode.length !== 6}
                >
                  登录
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
              </>
            )}
            
            <div className="relative mt-8 mb-6">
              <div className="absolute inset-0 flex items-center">
                <div className="w-full border-t border-border"></div>
              </div>
              <div className="relative flex justify-center text-xs uppercase">
                <span className="bg-card px-2 text-muted-foreground">其他登录方式</span>
              </div>
            </div>
            
            <Button 
              onClick={handleWeChatLogin}
              variant="outline" 
              className="w-full h-14 text-lg rounded-xl border-2 border-[#07C160] text-[#07C160] hover:bg-[#07C160]/10 hover:text-[#07C160] transition-all duration-300"
            >
              <svg 
                viewBox="0 0 24 24" 
                fill="currentColor" 
                height="20" 
                width="20" 
                className="mr-2"
              >
                <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 01.213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.328.328 0 00.166-.054l1.9-1.106a.582.582 0 01.504-.043 11.076 11.076 0 003.054.426c.386 0 .768-.023 1.146-.061-.26-.815-.403-1.67-.403-2.552 0-4.055 3.933-7.347 8.777-7.347.383 0 .761.022 1.136.06C18.347 3.876 14.207 2.187 8.691 2.187zm.984 4.17a1.222 1.222 0 00-1.227 1.207c0 .662.55 1.207 1.227 1.207.673 0 1.227-.545 1.227-1.207 0-.662-.554-1.207-1.227-1.207zm5.255 0a1.222 1.222 0 00-1.227 1.207c0 .662.55 1.207 1.227 1.207.673 0 1.227-.545 1.227-1.207 0-.662-.555-1.207-1.227-1.207zM24 14.192c0-3.42-3.465-6.198-7.73-6.198-4.266 0-7.73 2.778-7.73 6.198 0 3.42 3.464 6.197 7.73 6.197.896 0 1.753-.14 2.544-.378a.507.507 0 01.441.038l1.672.972a.299.299 0 00.147.049c.142 0 .254-.116.254-.26 0-.064-.024-.125-.041-.186l-.346-1.305a.513.513 0 01.184-.583c1.61-1.184 2.655-2.875 2.655-4.544zm-10.277-1.33a1.077 1.077 0 00-1.078 1.067c0 .583.483 1.067 1.078 1.067.594 0 1.077-.484 1.077-1.067 0-.583-.483-1.067-1.077-1.067zm5.094 0a1.077 1.077 0 00-1.078 1.067c0 .583.484 1.067 1.078 1.067.595 0 1.077-.484 1.077-1.067 0-.583-.482-1.067-1.077-1.067z" />
              </svg>
              微信一键登录
            </Button>
          </div>
          
          <p className="text-center text-xs text-muted-foreground mt-6">
            登录即表示您同意我们的 <a href="#" className="text-primary hover:underline">服务条款</a> 和 <a href="#" className="text-primary hover:underline">隐私政策</a>
          </p>
        </div>
      </div>
    </div>
  );
};

export default LoginPage;
